<template>
  <ElForm ref="searchFormComponent" class="page-grid-layout-search-form">
    <ElRow :gutter="gutter || 20">
      <slot></slot>
      <slot name="actions">
        <ElCol :span="6">
          <ElFormItem label=" ">
            <ElButton type="primary" :icon="Search" @click="DoSearch">搜索</ElButton>
            <ElButton type="primary" :icon="Refresh" @click="resetSearch">重置</ElButton>
          </ElFormItem>
        </ElCol>
      </slot>
    </ElRow>
  </ElForm>
</template>

<script setup lang="ts">
import { ElForm } from "element-plus";
import { ref, unref } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
interface Emits {
  (t: "resetFields", form: InstanceType<typeof ElForm>): void;
  (t: "search", form: InstanceType<typeof ElForm>): void;
}
interface Props {
  searchHandle?: (form: InstanceType<typeof ElForm>) => any;
  gutter?: number
}

const searchFormComponent = ref<InstanceType<typeof ElForm>>();
const emit = defineEmits<Emits>();
const props = defineProps<Props>();
function resetSearch() {
  unref(searchFormComponent)!.resetFields();
  emit("resetFields", searchFormComponent.value!);
}
function DoSearch() {
  if (props.searchHandle) {
    props.searchHandle(searchFormComponent.value!);
  } else {
    emit("search", searchFormComponent.value!);
  }
}
defineExpose({ resetSearch, searchForm: searchFormComponent });
</script>
